<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<%@ include file="/resource/include/link_css.jsp"%>

<%@ include file="/resource/include/hander.jsp"%>

<%@ include file="/resource/include/sidebar.jsp"%>


<div class="content-inner">
    <!-- Page Header-->
    <header class="page-header">
        <div class="container-fluid">
            <h2 class="no-margin-bottom">${questionnaire.questionnairetitle} 结果统计</h2>
        </div>
    </header>
    <!-- Breadcrumb-->
    <div class="breadcrumb-holder container-fluid">
        <ul class="breadcrumb">

        </ul>
    </div>
    <!-- Forms Section-->
    <section class="forms">
        <div class="container-fluid">
            <div class="row">
                <div  class="col-lg-3">
                    <h1 style="font-size: 30px">共${sum}人作答</h1>
                    <form style="display: none" id="statistics" action="statisticsQuestion.do" method="post" >
                        <input type="number" name="nid"  id="nid" value="${questionnaire.nid}">
                        <input type="number" name="qid" id="qid" >
                        <input type="number" name="sum"  value="${sum}"  >
                    </form>
                    <table style="font-size:20px ">
                        <c:forEach  items="${questionsInfo.list}" var="question">

                            <tr>
                                <td>
                                    <button style="border:none" id="${question.qid}" >第${question.questioncode}题
                                            ${question.questionheading}</button>
                                </td>
                            </tr>

                        </c:forEach>
                    </table>
                </div>
                <!-- Basic Form-->
                <div style="background-color: #9ae2ff" class="col-lg-6">
                    <c:if test="${flug==0}">
                        <c:forEach  items="${questionsInfo.list}" var="question" >
                            <c:if test="${question.qid==qid}">
                                <h2> 第${question.questioncode}题 ${question.questionheading}</h2>
                            </c:if>

                        </c:forEach>

                        <table style="font-size: 20px" >
                            <c:forEach  items="${answersInfo.list}" var="answer" >
                                <tr>
                                    <td>
                                            ${answer.answer}
                                    </td>
                                </tr>
                            </c:forEach>
                        </table>
                    </c:if>
                    <c:if test="${flug==1}">
                        <c:forEach  items="${questionsInfo.list}" var="question" >
                            <c:if test="${question.qid==qid}">
                              <h2>第${question.questioncode}题 ${question.questionheading}</h2>
                            </c:if>

                        </c:forEach>
                        <div id="container1" style=" width: 500px;height: 300px;"></div>
                    </c:if>

                </div>

                <div style="background-color: #9ae2ff" class="col-lg-3">

                    <div >

                        <c:if test="${flug==1}">

                            <table style="font-size: 20px" >
                                <c:forEach  items="${questionsInfo.list}" var="question">
                                    <c:if test="${question.qid==qid}">
                                        <tr>
                                            <td>
                                                A：    ${question.optiona}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                B：    ${question.optionb}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                C：    ${question.optionc}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                 D：   ${question.optiond}
                                            </td>
                                        </tr>
                                    </c:if>

                                </c:forEach>
                            </table>
                        </c:if>

                    </div>

                </div>
            </div>
        </div>
    </section>

</div>
</div>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">

    $(document).ready(function(){
        $("button").click(function(){
            // alert($(this).attr("id"))
            $("#qid").val($(this).attr("id"));
            //提交查询的表单
            $("#statistics").submit();
        });
    });

    if(${flug}){
        var dom = document.getElementById("container1");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '柱状图分数划分';
        var namedate = ['A', 'B', 'C', 'D'];
        var numdate = ${answerstatistic};
        var colorlist = [];
        numdate.forEach(element => {

            colorlist.push(["#1aa8ce", "#49d3c6"])

    });
        option = {

            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: namedate,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#4dd1c4",
                            width: 1
                        }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#999'
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 人',
                        show: true,
                        textStyle: {
                            color: '#999'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#4dd1c4",
                            width: 1
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            color: '#ddd'
                        }
                    }

                }
            ],
            series: [
                {
                    name: '此项选择人数',
                    type: 'bar',
                    barWidth: '30%',
                    data: numdate,
                    itemStyle: {
                        normal: {
                            // color: new echarts.graphic.LinearGradient(
                            //     0, 0, 0, 1,
                            //     [
                            //         {offset: 1, color: 'red'},
                            //         {offset: 0, color: 'orange'}
                            //     ]
                            // )
                            color: function (params) {
                                // var colorList = colorlist;
                                // return colorList[params.dataIndex];
                                var colorList = colorlist

                                var index = params.dataIndex;
                                // if(params.dataIndex >= colorList.length){
                                //         index=params.dataIndex-colorList.length;
                                // }
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        { offset: 1, color: colorList[index][0] },
                                        { offset: 0, color: colorList[index][1] }
                                    ]);


                            }
                        }
                    }
                }
            ]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    }


</script>


<!-- JavaScript files-->
<script src="resource/vendor/jquery/jquery.min.js"></script>
<script src="resource/vendor/popper.js/umd/popper.min.js"> </script>
<script src="resource/vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="resource/vendor/jquery.cookie/jquery.cookie.js"> </script>
<script src="resource/vendor/chart.js/Chart.min.js"></script>
<script src="resource/vendor/jquery-validation/jquery.validate.min.js"></script>
<!-- Main File-->
<script src="resource/js/front.js"></script>
</body>
</html>